<template>
<h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="person.photo" ></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="f in person.friends">{{f}}</li>
        </ul>
      </td>
    </tr>
  </table>

  <button @click="loadData">加载数据</button>
</template>

<script setup>
import { ref } from 'vue';

const person =ref({
  name:'',
  age:'',
  photo:'',
  friends:[]
});

const loadData = () => {
  person.value = {
    name:'范传奇',
    age:'18',
    photo:'fcq.jpg',
    friends:['张三','李四','王五']
  };
}

</script>


<style scoped>

</style>